<template>
    <div>

<el-dialog center 
    v-dialogDrag
    :visible.sync="LogingRank"
    :close-on-press-escape="false" 
    :close-on-click-modal="false" 
    :show-close="false"
    custom-class="select-career-div">
    <el-input @click.native="$emit('MusicSound', 'click_two')" type="text" 
        placeholder="角色昵称" 
        v-model="params.career_name" 
        minlength="1" maxlength="6" show-word-limit/>
    <el-cascader @click.native="$emit('MusicSound', 'click_two')" 
        @expand-change="$emit('MusicSound', 'click_two')" 
        v-model="career_value" 
        :options="career" 
        :props="{ value: 'id', label: 'career',children: 'children'}" 
        @change="handleChange"
        style="width: 100%; margin-top: 20px;"></el-cascader>
    <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('closeDialog', 'logingRank', false)" :loading="loadingInsert">取消</el-button>
        <el-button type="primary" @click="submitInsert()" :loading="loadingInsert">确认保存</el-button>
    </div>
</el-dialog>
    </div>
</template>

<script>
export default {
    name:'tableSheet',
    props:{
        LogingRank:{
            required: true,//是否是必要传值  可不要时为 false
            type: Boolean, //定义类型 类型  ：字符串类型、
            default: false,   //没有传值的话 默认值 一般与 required:false 一起用
        },
        RoomCode:{
            required: true,//是否是必要传值  可不要时为 false
            type: String, //定义类型 类型  ：字符串类型、
            default: '',   //没有传值的话 默认值 一般与 required:false 一起用
        },
        PlayerInfo: {
            required: true,//是否是必要传值  可不要时为 false
            type: Object, //定义类型 类型  ：字符串类型、
            default: {},   //没有传值的话 默认值 一般与 required:false 一起用
        },
    },
    data() {
        return {
            loadingInsert: false,
            params:{
                room_code: this.RoomCode,
                career_name:'',
                career:'',
                transfer:'',
                cover:'',
            },
            career_value: [],

            career: [],
        }
    },
    watch:{
        LogingRank: {
            handler(newValue, oldValue) {
                console.log("LogingRank newValue, oldValue :", newValue, oldValue);
                if (!!newValue) {
                    this.optimization_data();
                }
            },
            deep: true,
        },
    },
    created() {
        this.career_list();
    },
    methods: {
        submitInsert() {
            this.$emit('MusicSound', 'click_two');
            if (!this.params.career_name || this.params.career_name == '') {
                this.$notify.error({title:'', message: '请输入您的角色昵称'});
                return false;
            }
            if (!this.params.transfer || !this.params.cover) {
                this.$notify.error({title:'', message: '请选择您的参赛职业后再试'});
                return false;
            }

            this.loadingInsert = true;
            this.$post('/api/rooms-player/edit.html', this.params).then(res => {
                if (res.code == 200) {
                    this.$emit('closeDialog', 'logingRank', false);
                    this.$notify.success({ title: '', message: "职业信息保存成功"});
                } else {
                    this.$notify.error({ title: '', message: res.msg});
                }
                this.loadingInsert = false;
            }).catch(err => {
                this.loadingInsert = false;
                console.log(err);
            });
        },
        optimization_data() {
            let _this = this;
            _this.params.career_name = _this.PlayerInfo.career_name;
            _this.params.career = _this.PlayerInfo.career;
            _this.params.transfer = _this.PlayerInfo.transfer;
            _this.params.cover = _this.PlayerInfo.cover;
            
            for (let i in _this.career) {
                if (_this.career[i].career == _this.PlayerInfo.career) {
                    _this.career_value[0] = _this.career[i].id;

                    for (let x in _this.career[i].children) {
                        if (_this.career[i].children[x].career == _this.PlayerInfo.transfer) {
                            _this.career_value[1] = _this.career[i].children[x].id;
                        }
                    }
                }
            }
        },
        handleChange(value) {
            this.$emit('MusicSound', 'click_two');
            if (!value) {
                return false;
            }
            let _this = this;
            for (let i in this.career) {
                if (this.career[i].id == value[0]) {
                    _this.params.career = _this.career[i].career;
                    for (let x in this.career[i].children) {
                        if (this.career[i].children[x].id == value[1]) {
                            _this.params.transfer = this.career[i].children[x].career;
                            _this.params.cover = this.career[i].children[x].cover;
                        }
                    }
                }
            }
        },
        career_list() {
            this.loadingInsert = true;
            this.$post('/api/career/list.html', {}).then(res => {
                if (res.code == 200) {
                    this.career = res.data;
                } else {
                    this.$notify.error({ title: '', message: res.msg});
                }
                this.loadingInsert = false;
            }).catch(err => {
                this.loadingInsert = false;
                console.log(err);
            });
        },
    },
}
</script>


<style scoped>
</style>



